<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑用户信息</title>
    <link rel="stylesheet" th:href="@{css/editUser.css}">
</head>
<body>
<div class="container">
    <h1>编辑用户信息</h1>

    <!-- 编辑用户信息与修改密码放在同一个form中 -->
    <form action="update" method="post" onsubmit="return validateForm();">
        <input type="hidden" name="userid" th:value="${user.userid}">

        <!-- 用户信息部分 -->
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" th:value="${user.username}" readonly>
        </div>

        <div class="form-group">
            <label for="realname">真实姓名：</label>
            <input type="text" id="realname" name="realname" th:value="${user.realname}" required>
        </div>

        <div class="form-group">
            <label for="phonenumber">联系电话：</label>
            <input type="text" id="phonenumber" name="phonenumber" th:value="${user.phonenumber}" required>
        </div>

        <div class="form-group">
            <label for="email">电子邮件：</label>
            <input type="email" id="email" name="email" th:value="${user.email}" required>
        </div>

        <!-- 修改密码部分 -->
        <h2>修改密码</h2>
        <div class="form-group">
            <label for="password">当前密码：</label>
            <input type="password" id="password" name="password" required>
            <p id="oldPasswordMessage" style="font-size: 0.9rem; color: red;"></p> <!-- 提示旧密码错误 -->
        </div>

        <div class="form-group">
            <label for="newPassword">新密码：</label>
            <input type="password" id="newPassword" name="newPassword" oninput="validatePasswords();">
        </div>

        <div class="form-group">
            <label for="confirmPassword">确认新密码：</label>
            <input type="password" id="confirmPassword" name="confirmPassword" oninput="validatePasswords();">
            <p id="passwordMatchMessage" style="font-size: 0.9rem;"></p> <!-- 提示新密码是否一致 -->
        </div>

        <!-- 表单提交 -->
        <div class="form-actions">
            <button type="submit" id="submitBtn" class="save-button" disabled>保存修改</button>
            <a href="personal" class="cancel-button">取消</a>
        </div>
    </form>
</div>

<script>
    // 获取后台传递的当前用户密码
    var currentPassword = "[[${user.password}]]";

    // 实时验证密码一致性
    function validatePasswords() {
        var newPassword = document.getElementById('newPassword').value;
        var confirmPassword = document.getElementById('confirmPassword').value;
        var message = document.getElementById('passwordMatchMessage');

        // 如果新密码为空，跳过一致性验证
        if (newPassword === "" && confirmPassword === "") {
            message.textContent = '';  // 清除提示信息
            document.getElementById('submitBtn').disabled = false;  // 启用提交按钮
        } else if (newPassword !== confirmPassword) {
            message.style.color = 'red';
            message.textContent = '密码不一致，请重新输入。';
            document.getElementById('submitBtn').disabled = true;  // 禁用提交按钮
        } else {
            message.style.color = 'green';
            message.textContent = '密码一致。';
            document.getElementById('submitBtn').disabled = false; // 启用提交按钮
        }
    }

    // 先验证旧密码是否正确，再验证新密码和确认密码是否一致
    function validateForm() {
        var oldPassword = document.getElementById('oldPassword').value;
        var newPassword = document.getElementById('newPassword').value;
        var confirmPassword = document.getElementById('confirmPassword').value;

        if (currentPassword === "") {
            document.getElementById('oldPasswordMessage').textContent = "请重新登录";
            return false;
        }

        // 旧密码为空时，提示用户填写旧密码
        if (oldPassword === "") {
            document.getElementById('oldPasswordMessage').textContent = "请输入旧密码";
            return false;
        }

        // 校验旧密码是否正确（假设从后端获取当前的真实密码）
        if (oldPassword !== currentPassword) {
            document.getElementById('oldPasswordMessage').textContent = "旧密码错误，请重新输入";
            return false;  // 阻止表单提交
        }

        // 如果新密码为空，跳过一致性验证
        if (newPassword === "" && confirmPassword === "") {
            document.getElementById('submitBtn').disabled = false; // 启用提交按钮
            return true; // 允许提交表单
        }

        // 如果新密码和确认密码不一致，阻止表单提交
        if (newPassword !== confirmPassword) {
            alert('新密码和确认密码不一致，请重新输入');
            return false;  // 阻止表单提交
        }

        return true;  // 允许提交表单
    }

    // 页面加载时，确保初始状态已正确验证
    document.addEventListener('DOMContentLoaded', function() {
        validatePasswords();  // 在页面加载时验证密码一致性
        validateForm();       // 在页面加载时验证旧密码是否正确
    });
</script>
</body>
</html>
